<template>
    <div>
        <el-form label-width="100px">
            <el-form-item label="sku名称">
                <el-input placeholder="sku名称" size="normal" v-model="skuParams.skuName"></el-input>
            </el-form-item>
            <el-form-item label="价格(元)" size="normal">
                <el-input placeholder="价格(元)" type="number" v-model="skuParams.price"></el-input>
            </el-form-item>
            <el-form-item label="重量(克)" size="normal">
                <el-input placeholder="重量(克)" type="number" v-model="skuParams.weight"></el-input>
            </el-form-item>
            <el-form-item label="sku描述" size="normal">
                <el-input placeholder="sku描述" type="textarea" v-model="skuParams.skuDesc"></el-input>
            </el-form-item>
            <el-form-item label="平台属性" size="normal">
                <el-form :inline="true" style="margin: 5px 0px;">
                    <el-form-item v-for="(item, index) in attrArr" :key="item.id" :label="item.attrName" size="normal">
                        <el-select v-model="item.attrIdAndValueId" style="width: 300px;">
                            <el-option :value="`${item.id}:${attrValue.id}`"
                                v-for="(attrValue, index) in item.attrValueList" :key="attrValue.id"
                                :label="attrValue.valueName">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="销售属性" size="normal">
                <el-form :inline="true">
                    <el-form-item v-for="(item, index) in saleAttr" :key="item.id" :label="item.saleAttrName"
                        size="normal">
                        <el-select v-model="item.saleIdAndValueId" style="width: 300px;">
                            <el-option :value="`${item.id}:${saleAttrValue.id}`"
                                v-for="(saleAttrValue, index) in item.spuSaleAttrValueList" :key="saleAttrValue.id"
                                :label="saleAttrValue.saleAttrValueName">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="图片名称" size="normal">
                <el-table border :data="imgList" ref="table">
                    <el-table-column type="selection" width="80px" align="center">

                    </el-table-column>
                    <el-table-column label="图片">
                        <template #="{ row, $index }">
                            <img :src="row.imgUrl" alt="" style="width: 100px; height: 100px;">
                        </template>
                    </el-table-column>
                    <el-table-column label="名称" prop="imgName">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #="{ row, $index }">
                            <el-button type="primary" size="small" @click="handler(row)">设置默认</el-button>
                        </template>
                    </el-table-column>
                </el-table>


            </el-form-item>
            <el-form-item label="" size="normal">
                <el-button type="primary" size="default" @click="save">保存</el-button>
                <el-button size="default" @click="cancel">取消</el-button>

            </el-form-item>

        </el-form>


    </div>
</template>

<script setup lang="ts">
import { reqAttr } from '@/api/product/attr';
import { AttrResponseDate } from '@/api/product/attr/type';
import { reqAddSku, reqSpuHasSaleAttr, reqSpuImageList } from '@/api/product/spu';
import { SpuImg, SpuHasImg, SaleAttrResponseData, SkuData } from '@/api/product/spu/type';
import { ElMessage } from 'element-plus';
import { ref, reactive } from 'vue';
// 获取table组件实例
let table = ref<any>();
let $emit = defineEmits(['changeScene']);
// 平台属性
let attrArr = ref<any>([]);
// 商品图片
let imgList = ref<SpuImg[]>([]);
// 商品销售属性
let saleAttr = ref<any>([]);
//收集SKU的参数
let skuParams = reactive<SkuData>({
    //父组件传递过来的数据
    "category3Id": "",//三级分类的ID
    "spuId": "",//已有的SPU的ID
    "tmId": "",//SPU品牌的ID
    //v-model收集
    "skuName": "",//sku名字
    "price": "",//sku价格
    "weight": "",//sku重量
    "skuDesc": "",//sku的描述

    "skuAttrValueList": [//平台属性的收集
    ],
    "skuSaleAttrValueList": [//销售属性
    ],
    "skuDefaultImg": "",//sku图片地址
})
const cancel = () => {
    $emit('changeScene', { flag: 0, params: '' })
}
// 对外暴露的方法
const initSkuData = async (c1id: number | string, c2id: number | string, spu: any) => {
    //收集数据
    skuParams.category3Id = spu.category3Id;
    skuParams.spuId = spu.id;
    skuParams.tmId = spu.tmId;
    let result: SpuHasImg = await reqSpuImageList(spu.id);
    let result1: SaleAttrResponseData = await reqSpuHasSaleAttr(spu.id);
    let result2: AttrResponseDate = await reqAttr(c1id, c2id, spu.category3Id);
    imgList.value = result.data;
    saleAttr.value = result1.data;
    attrArr.value = result2.data;
}
// 设置默认图片
const handler = (row: any) => {
    // 所有复选框不勾选,遍历imgList
    imgList.value.forEach((item: any) => {
        table.value.toggleRowSelection(item, false);
    })
    // 选中复选框
    table.value.toggleRowSelection(row, true);
    // 设置默认图片
    skuParams.skuDefaultImg = row.imgUrl;
}
const save=async()=>{
    //整理数据
    // 平台属性
    skuParams.skuAttrValueList=attrArr.value.reduce((prev:any,next:any)=>{
        // next是当前遍历的对象
        if(next.attrIdAndValueId){
        // 解析数据
        let[attrId,valueId]=next.attrIdAndValueId.split(':');
        // 向数组追加元素对象
        prev.push({
            attrId,
            valueId
        })
        }
        return prev;
    },[]);
    // 销售属性
    skuParams.skuSaleAttrValueList=saleAttr.value.reduce((prev:any,next:any)=>{
        // next是当前遍历的对象
        if(next.saleIdAndValueId){
        // 解析数据
        let[saleAttrId,saleAttrValueId]=next.saleIdAndValueId.split(':');
        // 向数组追加元素对象
        prev.push({
            saleAttrId,
            saleAttrValueId
        })
        }
        return prev;
    },[]);
    // 发送请求
  let result=await reqAddSku(skuParams);
  if(result.code==200){
    ElMessage({
        type:'success',
        message:'添加SKU成功!'
    })
    $emit('changeScene', { flag: 0, params: '' })
  }else{
    ElMessage({
        type:'error',
        message:'添加SKU失败'
    })
  }
    
}
// 对外暴露方法，父组件可以使用
defineExpose({ initSkuData })
</script>

<style scoped></style>